<style scoped>
.car-offer{
    padding: 15px;
}
.add-car{
    width: 600px;
    margin: 0 auto;
}
.add-car-title{
    border-bottom: 1px solid #ddd;
    text-align: center;
    margin-bottom: 40px;
}
.add-car-title span{
    display: inline-block;
    min-width: 200px;
    text-align: center;
    cursor: pointer;
    line-height: 25px;
    padding-bottom: 10px;
}
.add-car-title span.active{
    color: #358bf2;
    border-bottom: 2px solid #358bf2;
}
.add-car-tab{
    width: 400px;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 100px;
}
.offer-title{
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.offer-link{
    float: right;
    text-decoration: underline;
}
.province-div{
    display: inline-block;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
}
.form-checkbox{
    margin-bottom: 20px;
    text-align: right;
}
.refbtn{
    cursor: pointer;
}
</style>

<style>
.common-car-title{
    border-bottom:1px solid #f2f2f2;
    overflow: hidden;
    padding:10px 0;
}
.common-car-title h3{
    position: relative;
    display: inline-block;
    font-size:16px;
    padding-left:15px;
}
.common-car-title h3:before{
    content:'';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:3px;
    background-color:#3db1fa;
}
.common-title-r{
    width : 250px;
    float: right;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="car-offer">
            <div class="common-car-title">
                <h3>车险投保</h3>
                <div class="common-title-r">
                    <Steps :current="0" size="small">
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                    </Steps>
                </div>
            </div>
            <div class="offer-title">
                基本车辆信息
                <a class="offer-link" @click="toList">点击查看列表详情>></a>
            </div>
            <div class="add-car">  
                <div class="add-car-tab">
                    <Form :model="carnmuber" :label-width="80" ref="carnmuber">
                        <FormItem label="行驶地区">
                            <Cascader :data="areas" @on-change="areaChange" :load-data="loadData"></Cascader>
                        </FormItem>
                        <FormItem label="车牌号">
                            <Input size="large" v-model="carnmuber.licenseNo" @on-change="caridChange()"  placeholder="请输入车牌号">  
                                <span slot="prepend" class="refbtn" @click="openModal">{{ref}}</span>
                            </Input>
                        </FormItem>
                        <!-- <FormItem label="车主姓名" prop="ownerName">
                            <Input size="large" v-model="carnmuber.ownerName"  placeholder="请输入车主姓名">  
                            </Input>
                        </FormItem> -->
                        <!-- <Row>
                            <Col span="12" offset="6">
                                
                            </Col>
                        </Row> -->
                        <div class="form-checkbox">
                            <Checkbox @on-change="newCarChange">新车未上牌</Checkbox>
                        </div>
                        <Button type="primary" long size="large" @click="caridSend()">立即获取报价</Button>                    
                    </Form>    
                </div>
            </div>
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Modal
            v-model="provinceModal">
            <div class="province-div" v-for="item in refarry" :key="item.value" @click="changeProvince(item.value)">
                {{item.text}}
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="closeModal">确定</Button>
            </div>
        </Modal>  
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city2 from '../../asset/js/city2'
import { getProvinces , getCity , vehicleInfoByLicenseNo} from '../../api/api'
export default {
    data () {
        return {
            spinShow: false,
            carnmuber : {
                carid:'',
            },            
            refarry:city2,
            select1:'27',
            areas:[],
            ref:'京',
            provinceModal:false,
            modal_loading:false,
            province:'',
            cityCode:'',
            newCar:false,
        }
    },
    components: {
        productTitle
    },
    computed: {
        fullcarid(){
            return this.ref + this.carnmuber.licenseNo
        }
    },
    mounted () {
        this.getAllProvince()
    },
    methods: {
        toList(){
            this.$router.push({'name':'car_order_list'})
        },
        newCarChange(e){
            this.newCar = !this.newCar
        },
        caridSend(){
            var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            if(this.newCar){
                if(!this.province||!this.cityCode){
                    this.$Message.error('请完善行驶地区！')
                    return false
                }
                let _city = {
                    province:this.province,
                    cityCode:this.cityCode
                }
                this.$store.dispatch('changeProvince',_city)
                this.$router.push({name:'car_info'})
            }else{
                if(cPattern.test(this.ref + this.carnmuber.licenseNo)){
                    
                    let _params = {
                        licenseNo:this.ref + this.carnmuber.licenseNo
                    }
                    if(!this.province||!this.cityCode){
                        this.$Message.error('请完善行驶地区！')
                        return false
                    }
                    let _city = {
                        province:this.province,
                        cityCode:this.cityCode
                    }
                    this.$store.dispatch('changeProvince',_city)
                    new Promise((resolve, reject) => {
                        vehicleInfoByLicenseNo(_params).then(response => {
                            console.log(response.data)
                            if (response.data.state == 1) {
                                let _data = response.data.data 
                                this.$store.dispatch('changeCarInfo',_data)                           
                                //this.$store.dispatch('changeResponseNo',_data.responseNo)
                                this.$router.push({name:'car_info'})
                            } else {
                                let _data = {
                                    licenseNo:this.ref + this.carnmuber.licenseNo
                                }
                                this.$store.dispatch('changeCarInfo',_data)  
                                this.$router.push({name:'car_info'})
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }else{
                    console.log(this.ref + this.carnmuber.licenseNo)
                    this.$Message.error('车牌号错误！')
                }
            }            
        },
        caridChange(){
            this.carnmuber.licenseNo = this.carnmuber.licenseNo.toUpperCase();  
            console.log(this.carnmuber.licenseNo)
        },
        changeProvince(value){
            this.ref = value
            this.provinceModal = false
        },
        openModal(){
            this.provinceModal = true
        }, 
        closeModal(){
            this.provinceModal = false
        },
        areaChange(value, selectedData){
            console.log(value,selectedData)
            this.province = value[0]
            this.cityCode = value[1]
            let _ref = selectedData[1].cityPlate
            this.ref = ''
            this.ref = _ref[0]
            this.carnmuber.licenseNo = _ref[1]
            this.$set(this.carnmuber,'licenseNo',_ref[1])
        },     
        loadData (item, callback) {                    
            if(item.children.length == 0){
                item.loading = true;
                let _params = {
                    provinceCode:item.value,
                } 
                new Promise((resolve, reject) => {
                    getCity(_params).then(response => {
                        console.log(response.data)
                        if (response.data.state == 1) {
                            let _data = response.data.data
                            const _list = _data.map(sitem =>{
                                return {
                                    value:sitem.cityCode,
                                    label:sitem.cityName,
                                    cityPlate:sitem.cityPlate,
                                }
                            })
                            item.children = item.children.concat(_list)
                            item.loading = false;
                            callback();
                        } else {
                            item.loading = false;
                            callback();
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }                    
        },
        getAllProvince(){
            new Promise((resolve, reject) => {
                getProvinces().then(response => {
                    console.log(response.data)
                    if (response.data.state == 1) {
                        let _data = response.data.data
                        const _list = _data.map(item =>{
                            return {
                                value:item.provinceCode,
                                label:item.provinceName,
                                children: [],
                                loading: false
                            }
                        })
                        this.areas = _list
                    } else {
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            }); 
        }
        
    }
}
</script>
